$(function() {
   const layer = layui.layer
   const form = layui.form
   // 导入分页模块
   const laypage = layui.laypage

   // 查询参数
   const query = {
      pagenum: 1, // 当前页码
      pagesize: 5, // 每页条数
      cate_id: '', // 类别ID
      state:  ''// 文章状态
   }
   renderCate()

   // 查询类别列表 渲染到选择框中
   function renderCate () {
      $.get('/my/article/cates').then(res => {
         const html_str = template('tpl-cate', res)
         $('select[name=cate_id]').html(html_str)
         // 因为select由layui渲染的 所以还需要layui渲染一次
         form.render()
      })
   }

   renderArticle()
   // 查询文章列表 渲染到表格中
   function renderArticle () {
      // 1. 发起请求 
      $.get('/my/article/list', query).then(res => {
         const total = res.total
         // 2. 渲染到表格中
         $('tbody').html(template('tpl-list', res))
         // 创建分页实例 进行分页
         laypage.render({
            elem: 'pager', // 容器的id
            count: total, // 总数量 默认一页10条
            limit: query.pagesize, // 每页数量
            limits: [2, 5, 10, 20], // 条数切换
            curr: query.pagenum, // 当前页码
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 自定义布局
            // 监听页码改变 obj当前页码配置  first是否为首次切换
            jump: function(obj, first) {
               // 设置页码
               query.pagenum = obj.curr
               // 每页条数
               query.pagesize = obj.limit
               // 不是初次加载便重新查询
               if (!first) {
                  renderArticle()
               }
            }
         })
      })
   }

   // 监听筛选表单的提交事件
   $('#filter-form').on('submit', function() {
      // 1. 获取表单选择的值
      const data = form.val('filter-form')
      // 2. 修改查询参数
      query.cate_id = data.cate_id
      query.state = data.state
      // 3. 查询文章列表
      renderArticle()
      // 阻止表单提交
      return false
   })

   // 给删除按钮绑定点击事件 （事件委托）
   $('tbody').on('click', '.btn-delete', function() {
      // 询问框
      layer.confirm('你确定要删除吗？', { icon: 3, title: '提示' }, index => {
         // 获取删除按钮的个数
         const len = $('.btn-delete').length
         // 1. 获取当前文章的ID
         const id = $(this).data('id')
         // 2. 发送请求删除文章
         $.get('/my/article/delete/' + id).then(res => {
            if (res.status !== 0) {
               return layer.msg('删除失败')
            }
            layer.msg('删除成功')
            // 当删除该页最后一条内容时  再次查询时不会出现数据
            // 为啥不会出现？ 查询的是之前的页码
            // 如何解决？  当该内容为最后一条时（获取当前有多少个删除按钮）  将页码-1
            if (len <= 1) {
               query.pagenum = query.pagenum == 1 ?  1 : query.pagenum - 1
            }
            // 重新渲染列表
            renderArticle()
         })
         // 关闭窗口
         layer.close(index)
      })
   })

   // 给预览文章链接绑定点击事件 preview-link（事件委托）
   $('tbody').on('click', '.preview-link', function () {
      const id = $(this).data('id')
      // 查询当前文章详情
      $.get('/my/article/' + id).then(res => {
          // 1. 显示页面弹窗
         layer.open({
            type: 1,
            title: '文章预览',
            area: ['85%', '85%'],
            content: template('tpl-preview', res)
         })
      })
     
   })
})